<template>
    <div id="app">
        <table>
            <thead>
            <tr>
                <th>电影ID</th>
                <th>标题</th>
                <th>导演</th>
                <th>上映日期</th>
                <th>评分</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="movie in movies" :key="movie.movieId">
                <td>{{ movie.movieId }}</td>
                <td>{{ movie.title }}</td>
                <td>{{ movie.director }}</td>
                <td>{{ movie.releaseDate }}</td>
                <td>{{ movie.rating }}</td>
                <td>
                    <button @click="editMovie(movie)">编辑</button>
                    <button @click="deleteMovie(movie.movieId)">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                movies: []
            };
        },
        mounted() {
            this.fetchMovies();
        },
        methods: {
            fetchMovies() {
                this.$axios.get('/movie?cmd=list').then(response => {
                    this.movies = response.data;
                }).catch(error => {
                    console.error(error);
                });
            },
            editMovie(movie) {
                // 编辑电影逻辑
            },
            deleteMovie(movieId) {
                if (confirm('确定要删除这部电影吗？')) {
                    this.$axios.get(`/movie?cmd=delete&movieIds=${movieId}`).then(response => {
                        if (response.data.code === '200') {
                            this.fetchMovies();
                        }
                    }).catch(error => {
                        console.error(error);
                    });
                }
            }
        }
    };
</script>

<style scoped>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: left;
    }
</style>